<template>
  <div style="background-color: #ffffff">
    <div class="log-bg">
      <div class="login-container banner_dh">
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
          <div class="title-container">
            <h3 class="title">企业登录</h3>
          </div>
          <el-form-item prop="username">
            <!--            <span class="svg-container">-->
            <!--              <svg-icon icon-class="user" />-->
            <!--            </span>-->
            <el-input
              ref="username"
              v-model="loginForm.username"
              placeholder="输入邮箱"
              name="username"
              type="text"
              tabindex="1"
            />
          </el-form-item>
          <el-form-item prop="password">
            <!--            <span class="svg-container">-->
            <!--              <svg-icon icon-class="password" />-->
            <!--            </span>-->
            <el-input
              :key="passwordType"
              ref="password"
              v-model="loginForm.password"
              type="password"
              placeholder="请输入密码"
              name="password"
              tabindex="2"
              auto-complete="on"
              @keyup.enter.native="handleLogin"
            />
            <!--            <span class="show-pwd" @click="showPwd">-->
            <!--              <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />-->
            <!--            </span>-->
          </el-form-item>
          <el-button :loading="loading" type="primary" style="width:100%;font-size:18px;height: 40px" @click.native.prevent="handleLogin">用户登录</el-button>
          <div class="tips" style="color:#495d64;line-height:40px;text-align:center;margin-top:10px;">
            <span style="font-size: 14px;cursor: pointer;" @click="forgetPwd">忘记密码</span> | <router-link :to="{ path:'/register' }">
              <span style="font-size: 14px;cursor: pointer;">企业注册</span></router-link>
          </div>
        </el-form>
      </div>
    </div>
    <div style="width: 1200px; margin: 0 auto;">
      <div style="display: flex;">
        <div class="top_news">
          <div class="w">
            <router-link to="/news_2024101001">
              <h4><span />中共中央办公厅 国务院办公厅关于加快公共数据资源开发利用的意见</h4>
              <p>
                坚持以习近平新时代中国特色社会主义思想为指导，深入贯彻党的二十大和二十届二中、三中全会精神，完整准确全面贯彻新发展理念，统筹发展和安全，兼顾效率与公平，以促进公共数据合规高效流通使用为主线，以提高资源开发利用水平为目标，破除公共数据流通使用的体制性障碍、机制性梗阻，激发共享开放动力，优化公共数据资源配置，释放市场创新活力，充分发挥数据要素放大、叠加、倍增效应，为不断做强做优做大数字经济、构筑国家竞争新优势提供坚实支撑。</p>
            </router-link>
          </div>
        </div>

      </div>
    </div>
    <div style="width: 1200px; margin: 0 auto;">
      <div class="news_container">
        <div class="w fb">
          <div id="swiper2" class="swiper-container swiper-container-initialized swiper-container-horizontal">

            <img src="../../assets/img/zjtxhome.png" style="width: 100%;height: 100%">
          </div>
          <div class="noticelist">
            <div class="h">
              <h4>专精特新</h4>
              <!--              <a target="_blank" href="/sme_news_list.aspx?category_id=70">查看更多&gt;&gt;</a>-->
            </div>
            <ul>

              <li>
                <a target="_blank" href="/news_2024100901">
                  <p>关于公布2024年第三批河北省创新型中小企业名单的通知</p><span>2024-10-28</span>
                </a>
              </li>
              <li>
                <a target="_blank" href="/news_2024100902">
                  <p>湖北十堰市：关于开展第五批创新型中小企业培育工作的通知</p><span>2024-10-28</span>
                </a>
              </li>

              <li>
                <a target="_blank" href="/news_2024100903">
                  <p>关于开展北京市第一批第二年专精特新 “小巨人”企业高质量发展项目绩效考核工作的通知</p><span>2024-10-18</span>
                </a>
              </li>

              <li>
                <a target="_blank" href="/news_2024101002">
                  <p>关于印发《国家数据标准体系建设指南》的通知</p><span>2024-10-18</span>
                </a>
              </li>

              <li>
                <a target="_blank" href="/news_2024101001">
                  <p>中共中央办公厅 国务院办公厅关于加快公共数据资源开发利用的意见</p><span>2024-10-11</span>
                </a>
              </li>

              <li>
                <a target="_blank" href="/news_2024101003">
                  <p>网络数据安全管理条例</p><span>2024-09-30</span>
                </a>
              </li>

            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="num">
      <ul class="w fa">
        <li>
          <div class="tit">
            <h4 id="num1">4800万家</h4>
          </div>
          <p>全国中小企业
          </p>
        </li>
        <li>
          <div class="tit">
            <h4 id="num2">100万家
            </h4>
          </div>
          <p>创新型中小企业
          </p>
        </li>
        <li>
          <div class="tit">
            <h4 id="num3">10万家
            </h4>
          </div>
          <p>省级专精特新企业</p>
        </li>
        <li>
          <div class="tit">
            <h4 id="num4">10000家
            </h4>
          </div>
          <p>国家级小巨人企业
            用户</p>
        </li>
        <li>
          <div class="tit">
            <h4 id="num5">1000家
            </h4>
          </div>
          <p>单项冠军
          </p>
        </li>
        <li>
          <div class="tit">
            <h4 id="num6">145家
            </h4>
          </div>
          <p>世界500强企业</p>
        </li>
      </ul>
    </div>
    <!--    <div class="col-tital"> <div class="col-tital-main">政 策 <span style="color: #0a76a4">咨 讯</span></div><div class="col-tital-minor">汇集政策热点 详实政策解读</div></div>-->
    <!--    <div class="col-con">-->
    <!--      <div class="col-con-left">-->
    <!--        <div class="col-con-left-tital">-->
    <!--          <img src="../../assets/img/shutiao.png" class="col-con-tital-tiao">-->
    <!--          <div class="col-con-left-tital-main">专精特新</div>-->
    <!--          <router-link to="/" target="_blank">-->
    <!--            <div class="col-con-left-tital-min">更多></div>-->
    <!--          </router-link>-->
    <!--        </div>-->

    <!--        <ul>-->
    <!--          <li>-->
    <!--            <router-link to="/news_2024100901" target="_blank">-->
    <!--              <div class="col-con-li-title">关于公布2024年第三批河北省创新型中小企业名单的通知</div><div class="col-con-li-title-r"><el-tag type="warning" size="medium">专精特新</el-tag></div>-->
    <!--              <div class="col-com-li-time">发布时间:2024-10-09</div>-->
    <!--            </router-link>-->
    <!--          </li>-->
    <!--          <li>-->
    <!--            <router-link to="/news_2024100902" target="_blank">-->
    <!--              <div class="col-con-li-title">湖北十堰市：关于开展第五批创新型中小企业培育工作的通知</div><div class="col-con-li-title-r"><el-tag type="warning" size="medium">专精特新</el-tag></div>-->
    <!--              <div class="col-com-li-time">发布时间:2024-10-09</div>-->
    <!--            </router-link>-->
    <!--          </li>-->
    <!--          <li>-->
    <!--            <router-link to="/news_2024100903" target="_blank">-->
    <!--              <div class="col-con-li-title">关于开展北京市第一批第二年专精特新 “小巨人”企业高质量发展项目绩效考核工作的通知</div><div class="col-con-li-title-r"><el-tag type="warning" size="medium">专精特新</el-tag></div>-->
    <!--              <div class="col-com-li-time">发布时间:2024-10-09</div>-->
    <!--            </router-link>-->
    <!--          </li>-->
    <!--        </ul>-->

    <!--      </div>-->
    <!--      <div class="col-con-right">-->
    <!--        <div class="col-con-left-tital">-->
    <!--          <img src="../../assets/img/shutiao.png" class="col-con-tital-tiao">-->
    <!--          <div class="col-con-left-tital-main">热点政策</div>-->
    <!--          <router-link to="/" target="_blank">-->
    <!--            <div class="col-con-left-tital-min">更多></div>-->
    <!--          </router-link>-->
    <!--        </div>-->

    <!--        <ul>-->
    <!--          <li>-->
    <!--            <router-link to="/news_2024101001" target="_blank"><div class="col-con-li-title">中共中央办公厅 国务院办公厅关于加快公共数据资源开发利用的意见</div><div class="col-con-li-title-r"><el-tag type="info" size="medium">热点政策</el-tag></div>-->
    <!--              <div class="col-com-li-time">发布时间:2024-10-10</div>-->
    <!--            </router-link>-->
    <!--          </li>-->
    <!--          <li>-->
    <!--            <router-link to="/news_2024101002" target="_blank">-->
    <!--              <div class="col-con-li-title">关于印发《国家数据标准体系建设指南》的通知</div><div class="col-con-li-title-r"><el-tag type="info" size="medium">热点政策</el-tag></div>-->
    <!--              <div class="col-com-li-time">发布时间:2024-10-10</div>-->
    <!--            </router-link>-->
    <!--          </li>-->
    <!--          <li>-->
    <!--            <router-link to="/news_2024101003" target="_blank">-->
    <!--              <div class="col-con-li-title">网络数据安全管理条例</div><div class="col-con-li-title-r"><el-tag type="info" size="medium">热点政策</el-tag></div>-->
    <!--              <div class="col-com-li-time">发布时间:2024-10-10</div>-->
    <!--            </router-link>-->
    <!--          </li>-->
    <!--        </ul>-->

    <!--      </div>-->
    <!--    </div>-->
    <div style="width: 1200px;margin: auto">
      <div class="div_func_index">

        <div class="xl_bak">
          <div class="btn_func" data-step="2" data-position="top">
            <i class="i_1" />
            <p>专业化</p>
            <div class="intro_func">
              <span>专注核心业务</span>
              <span>具有配套能力</span>
              <span>专业配套服务</span>
            </div>
          </div>
        </div>

        <div class="xl_bak">
          <div class="btn_func" data-step="3" data-position="top">
            <i class="i_2" />
            <p>精细化</p>
            <div class="intro_func">
              <span>精细化生产</span>
              <span>精细化管理</span>
              <span>精细化服务</span>
              <span>品质精良</span>
            </div>
          </div>
        </div>

        <div class="xl_bak">
          <div class="btn_func" data-step="4" data-position="top">
            <i class="i_3" />
            <p>特色化</p>
            <div class="intro_func">
              <span>工艺独特</span>
              <span>产品服务独特</span>
              <span>配方独特</span>
              <span>自主知识产权</span>
            </div>
          </div>
        </div>

        <div class="xl_bak">
          <div class="btn_func" data-step="5" data-position="top">
            <i class="i_4" />
            <p>新颖化</p>
            <div class="intro_func">
              <span>技术交叉融合</span>
              <span>管理模式创新</span>
              <span>新技术新产业</span>
              <span>新业态新模式</span>

            </div>
          </div>
        </div>

      </div>
    </div>
    <div class="col-con" style="height: 115px"><img src="../../assets/img/6.png" style="width: 1200px;height: 115px"></div>
    <div class="col-tital" s> <div class="col-tital-main">优 质 <span style="color: #0a76a4">服 务</span></div>
      <!--      <div class="col-tital-minor">打造线上线下一站式服务</div>-->
    </div>
    <div style="width: 1200px;margin: auto">
      <div class="div_func_index1">
        <router-link to="/login">
          <div class="xl_bak1">

            <img src="../../assets/img/1bottom.png" height="182" width="273">
          </div>
        </router-link>
        <router-link to="/login">
          <div class="xl_bak1">

            <img src="../../assets/img/2bottom.png" height="182" width="273"></div>
        </router-link>
        <router-link to="/login">
          <div class="xl_bak1">
            <img src="../../assets/img/3bottom.png" height="182" width="273"></div>
        </router-link>
        <router-link to="/login">
          <div class="xl_bak1">

            <img src="../../assets/img/4bottom.png" height="182" width="273"></div>
        </router-link>

      </div>
    </div>

    <!--    <div class="col-con" style="height: 12px">-->
    <!--      <div class="" style="margin-left: 20px">-->
    <!--        <img src="../../assets/img/shutiao.png" class="col-con-tital-tiao">-->
    <!--        <div class="col-con-left-tital-main">友情链接</div>-->
    <!--      </div>-->
    <!--    </div>-->
    <div class="col-tital" s> <div class="col-tital-main">友 情 <span style="color: #0a76a4">连 接</span></div>
      <!--       <div class="col-tital-minor">打造线上线下一站式服务</div>-->
    </div>
    <div class="col-con" style="height: 200px;background: #ffffff;">
      <div class="col-yqlj">
        <a href="https://www.miit.gov.cn" target="_blank">
          <img src="../../assets/img/y1.png" height="109" width="273">
        </a>
        <a href="https://www.stats.gov.cn/" target="_blank">
          <img src="../../assets/img/y2.png" height="109" width="273">
        </a>
        <a href="http://365trade.com.cn/" target="_blank">
          <img src="../../assets/img/y3.png" height="109" width="273">
        </a>
        <a href="https://www.bfhg.com.cn/" target="_blank">
          <img src="../../assets/img/y4.png" height="109" width="273">
        </a>
      </div>
      <div class="col-yqlj">
        <a href="https://www.inspur.com/" target="_blank">
          <img src="../../assets/img/y5.png" height="109" width="273">
        </a>
        <a href="https://www.spacechina.com/" target="_blank">
          <img src="../../assets/img/y6.png" height="109" width="273">
        </a>
        <a href="http://www.xlshuju.cn/" target="_blank">
          <img src="../../assets/img/ya7.png">
        </a>
        <a href="http://www.shuzihua.xlshuju.cn/" target="_blank">
          <img src="../../assets/img/ya1.png" height="109" width="273">
        </a>
      </div>
    </div>

  </div>
</template>
<script>
import { login } from '@/api/user'
import { setToken, setUsername } from '@/utils/auth'
import { encryptDes } from '@/utils/des'

export default {
  name: 'Home',
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请填写用户名'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 3) {
        callback(new Error('请填写密码'))
      } else {
        callback()
      }
    }
    return {
      country: [],
      place: [],
      userData: '',
      loginForm: {
        username: '',
        password: ''
      },
      userInfo: {
        type: '',
        username: '',
        name: ''
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
      },
      loading: false,
      passwordType: 'password',
      redirect: undefined
    }
  },
  created() {
  },
  methods: {
    forgetPwd() {
      this.$router.push({ path: '/forget' })
    },
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    handleLogin() {
      const that = this
      this.loading = true
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          const obj = { ...this.loginForm }
          const username = encryptDes(obj.username)
          const password = encryptDes(obj.password)
          login({ username: username, password: password }).then(response => {
            if (response.result === 1) {
              setToken(response.data.token)
              setUsername(response.data.username)
              this.loading = false
              that.$router.push('/console')
            } else {
              this.loading = false
              this.$message({
                message: response.msg, type: 'error'
              })
            }
          }).catch(() => {
            this.loading = false
          })
        } else {
          this.loading = false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
$bg:#fff;
$light_gray:#fff;
$cursor: #aaa;

.log-bg {
  background: url(../../assets/img/login_bg.jpg) center center no-repeat;
  background-size: 100% 100%;
  width: 100%;
  min-height: 500px;
  height: 500px;
}
.home-card {
  width: 240px;
  height: 215px;
  border-radius: 5px;
  margin-right: 20px;
  background-color: #3A71A8;
  color: #ffffff;
}

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .login-container .el-input input {
    color: $cursor;
  }
}
/* reset element-ui css */
.login-container {
  .el-input {
    display: inline-block;
    height: 45px;
    width: 100%;
    input {
      background: #fff;
      border: 0;
      -webkit-appearance: none;
      //padding: 12px 5px 12px 15px;
      margin: 4px 4px;
      color: #888888;
      height: 37px;
      caret-color: $cursor;
      border-radius: 4px;
      &:-webkit-autofill {
        box-shadow: 0 0 0 1000px inset !important;
        -webkit-text-fill-color: $cursor !important;
      }
    }
  }
::v-deep .el-input__inner{
    height: 45px;
}
 ::v-deep .el-input__prefix {
    height: 53px;
  }
  .el-form-item {
    border: 1px solid rgba(255, 255, 255, 1);
    /*background: rgba(0, 0, 0, 0.1);*/
    border-radius: 5px;
    color: #454545;
  }
}
</style>
<style lang="scss" scoped>
$dark_gray:#889aa4;
$light_gray:#eee;

.login-container {
  min-height: 100%;
  width: 100%;
  overflow: hidden;
  .diBox{
    width: 100%;
    position: relative;
    bottom:0;left: 0;
    .foot_text{
      width: 1200px;
      margin:0 auto;
    }
  }
  .login-form {
    position: relative;
    width: 400px;
    max-width: 100%;
    padding: 0 35px 0;
    margin: 3% 7% 0 55%;
    overflow: hidden;
    background-color: #ffffff;
    border-radius: 5px;

  }
  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;

    span {
      &:first-of-type {
        /*margin-right: 16px;*/
      }
    }
  }
  .svg-container {
    padding: 6px 5px 6px 15px;
    color: $dark_gray;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  }
  .title-container {
    position: relative;
    .title {
      font-size: 26px;
      color: #495d64;
      margin: 20px auto 20px auto;
      text-align: center;
      font-weight: bold;
    }
  }
  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
}
.banner_dh{
  width: 100%;
  /*height: 650px;*/
  min-width: 1200px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}
.col-tital {
  width: 1200px;
  margin: auto;
  text-align: center;
  }
.col-tital-main{
  font-size: 36px;
  font-weight: bold;
  font-family: "微软雅黑 ";
}
.col-tital-minor{
  font-size: 14px;
  font-family: "微软雅黑 Light";
  margin-top: 10px;
  margin-bottom: 40px;
  color: #aaaaaa;
}
  .col-con{
    width: 1200px;
    margin: auto;
    height: 360px;
    margin-bottom: 60px;
  }
  .col-con ul{
    list-style-type: none;
    float: left;
    margin-left: -25px;
  }
  .col-con li{
    box-sizing: inherit;
    width: 540px;
    line-height: 30px;
    font-size: 16px;
    color: #333333;
    border-bottom: 1px #cccccc dashed;
    margin-bottom: 15px;
  }
      .col-con-left{
    float: left;
      width: 585px;
        margin-right: 15px;
        background: #ffffff;
        padding: 5px;
  }
    .col-con-left-tital{
    float: left;
      width: 575px;
      margin: 15px;
  }
  .col-con-left-tital-main{
    float: left;
    font-size: 20px;
    font-family: "微软雅黑 ";
    font-weight: bold;
    line-height: 24px;
  }
    .col-con-left-tital-min{
      font-family: "微软雅黑 ";
    float: right;
      font-size: 14px;
      color: #888888;
      line-height: 24px;
      margin-right: 30px;
  }
  .col-con-right{
        float: right;
      width: 585px;
        margin-left: 15px;
    background: #ffffff;
     padding: 5px;
  }
  .col-con-tital-tiao{
    float: left;
        border-style: none;
    width: 5px;
    height: 24px;
    margin-right: 8px;
  }
  .col-con-li-title{
    width: 450px;
    float: left;
        overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 20px;
    color: #333333;
  }
  .col-con-li-title-r{
    float: right;
  }
  .col-com-li-time{
    font-size: 14px;
    color:#888888;
    margin-bottom: 10px;
  }
  .col-con-ser-img {
    display: flex;
    /*background: #ffffff;*/
    /*height: 200px;*/
  }
  .col-con-ser-img img{
    width: 210px;
    height: 112px;
    margin: 15px;
  }
  .col-yqlj{
display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    -ms-flex-line-pack: center;
    -ms-flex-wrap: wrap;
    justify-content: space-around;

  }
  .col-yqlj img{
    width: 250px;
    height: 95px;
  }
  .top_news {
    padding: 45px 0;
}
  .w {
    width: 1200px;
    margin: 0 auto;
    position: relative;
}
  .top_news h4 {
    display: flex;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: #333;
    height: 43px;
    line-height: 43px;
}
  .top_news h4 span {
    display: inline-block;
    background: url(../../assets/img/icon_hot.png) no-repeat center;
    width: 69px;
    height: 43px;
    margin-right: 15px;
}
  .top_news p {
    line-height: 28px;
    color: #666;
    font-size: 16px;
    margin-top: 15px;
    /*text-overflow: -o-ellipsis-lastline;*/
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
  .top_news p a {
    color: #1469b3;
}
#swiper2 {
    width: 578px;
    height: 392px;
    margin-left: 0;
}
  .swiper-container {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
}
.news_container .noticelist {
    width: 584px;
    height: 392px;
}.news_container .noticelist .h {
    display: flex;
    justify-content: space-between;
}
  .news_container .noticelist .h a {
    color: #666;
    font-size: 14px;
    line-height: 30px;
}
  ol, ul {
    list-style: none;
}
  .news_container .noticelist ul{
    padding: 0px;
  }
  .news_container .noticelist ul li a {
    display: flex;
    justify-content: space-between;
    line-height: 58px;
    color: #666;
    border-bottom: 1px solid #f3f3f3;
}
  .fb {
    display: flex;
    justify-content: space-between;
}
  .w {
    width: 1200px;
    margin: 0 auto;
    position: relative;
}
  .news_container .noticelist .h h4 {
    margin: 0px;
    line-height: 30px;
    color: #1469b3;
    font-weight: 700;
    font-size: 28px;
    color: #333;
}
  .news_container .noticelist ul li p {
    margin: 0px;
    width: 435px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 18px;
}
    .news_container .noticelist ul li{

      margin: 0px;
      padding: 0px;
      height: 58px;
}
  .fa {
    display: flex;
    justify-content: space-around;
}
  .w {
    width: 1200px;
    margin: 0 auto;
    position: relative;
}
  .num ul li {
    width: 224px;
    text-align: center;
    color: #666;
    font-size: 16px;
}
  .num ul li h4 {
    display: inline-block;
    font-weight: 700;
    color: #0b59ab;
    font-size: 40px;
}
  .num ul li {
    width: 224px;
    text-align: center;
    color: #666;
    font-size: 16px;
}
    .num ul li div{
      height: 110px;
}
    .num  p {
      color: #ffffff;
      font-weight: 500;
      margin: 0px;
      padding: 0px;
    }
  .num{
    width: 90%;min-width: 1400px; margin: 40px auto;background: linear-gradient(to top, #3387ff, #ffffff);
    height: 150px;
    line-height: 0px;
  }
  .div_func_index {
    width: 100%;
    height: 300px;
    display: flex;
    margin-top: 30px;
    position: relative;
    flex-direction: row;
    justify-content: space-between;
}
    .div_func_index1 {
    width: 100%;
    height: 240px;
    display: flex;
    margin-top: 30px;
    position: relative;
    flex-direction: row;
    justify-content: space-between;
}
/*  .div_func_index .xl_bak:first-child {*/
/*    padding-left: 0;*/
/*}*/
  .div_func_index .xl_bak {
    border:1px #ffffff solid;
    float: left;
    width: 251px;
    height: 240px;
    padding: 0px
}
    .div_func_index .xl_bak1 {
    float: left;
    padding: 0px
}

  .btn_func {
    width: 251px;
    height: 250px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #e6e6e6;
    /*box-shadow: 0 0 15px rgba(0, 0, 0, 0.06);*/
}
  .btn_func i.i_1 {
    background-position: 0 0;
}
  .btn_func i {
    width: 100px;
    height: 100px;
    margin: 20px 0 0 75px;
    display: block;
    background: url(../../assets/img/icon_func_index.png) no-repeat;
}
  i, b, em {
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
}
  .btn_func p {
    margin: 0px;
    padding: 0px;
    font-size: 22px;
    line-height: 30px;
    color: #000;
    text-align: center;
    font-weight: 600;
}
  .intro_func {
    width: 200px;
    margin: 20px 0 0 25px;
}
  .intro_func span {
    width: 95px;
    display: inline-block;
    text-align: center;
    font-size: 15px;
    line-height: 32px;
    color: #666;
    font-weight: 200;
}
  .btn_func i.i_2 {
    background-position: -100px 0;
}
  .btn_func i.i_3 {
    background-position: -200px 0;
}
  .btn_func i.i_4 {
    background-position: -300px 0;
}
  .noticelist ul li a:hover {
    color: #1469b3;
}
 a:hover {
    color: #1469b3;
}
  .btn_func:hover {
    border-color: #007cb3;
    box-shadow: 0 0 25px rgba(77, 168, 253, 0.2);
}
      .xl_bak1 img:hover {
    box-shadow: 0 1px 10px 5px rgba(153, 153, 153, 0.3);
    -webkit-box-shadow: 0 1px 10px 5px rgba(153, 153, 153, 0.3);
    -moz-box-shadow: 0 1px 10px 5px rgba(153, 153, 153, 0.3);
    -o-box-shadow: 0 1px 10px 5px rgba(153, 153, 153, 0.3);
}
  .col-yqlj img:hover {
/*border: 1px sandybrown solid;*/
}
</style>
